<header>
    <a href="javascript:history.back();">
        <i class="iconfont icon-xialalan-copy"></i>
    </a>
    <span>黄果树大瀑布</span>
</header>
<div class="allmap">
    <img src="image/map.jpg" style="width: 100%;height: 100%;">
    <div class="play_autio" style="display: none;" onclick="smollbtn()">
        <i class="iconfont icon-zanting" ></i>
        “黄果树大瀑布语音导游”
        <i class="iconfont icon-guanbi fr" onclick="close()"></i>
    </div>
</div>
<!--弹窗样式-->
<div class="video_box" style="display: block;">
    <div class="video_top">花卉远景区<i class="iconfont icon-guanbi fr"></i></div>
    <div class="video_foot">
        <div class="video_pic fl">
            <img src="image/1.jpg" alt="景点缩略图"/>
        </div>
        <div class="video_info fr">
            <p class="p-3">黄果树瀑布，即黄果树大瀑布。古称白水河瀑布、亦名"黄葛墅"瀑布
                或“黄桷树”瀑布，因本地广泛分布着“榕什么被省略了”</p>
            <a href="#" class="star_play" id="play" onclick="playpause()"><i class="iconfont icon-bofanganniu"></i>
                <span>播放</span>
            </a>
            <a href="#"><i class="iconfont icon-xiangqing"></i>详情</a>
        </div>
    </div>
    <audio  id="js-video">
        <source src="http://lps.menpiao.com/data/upload/video/2018/05/03/84d0d735cfcd25bcd1b3ab68414a1435.mp3" type="audio/mp3">
    </audio>
</div>
<script>
    var my_audio= document.getElementById("js-video");
    function playpause() {
        if(my_audio.paused){
            $("#play").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            $("#play").children("span").html('暂停');
            my_audio.play();


        }else {
            $("#play").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            $("#play").children("span").html('播放');
            my_audio.pause();
        }
    }
    $(".icon-guanbi").click(function () {
        $(".play_autio").show();
        $(".video_box").hide();
    });
    /*缩小*/
    function smollbtn() {
        if(my_audio.paused){
            $(".play_autio").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            my_audio.play();
        }else {
            $(".play_autio").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            my_audio.pause();
        }
    }

    /*暂停*/
    $(".play_autio>i:last-child").click(function () {
        my_audio.pause();
        $(this).parent().hide();
        event.stopPropagation();
    });
</script>